<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>按钮组</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <!-- 按钮组 -->
            <div class="btn-group">
                  <button type="button" class="btn btn-primary">按钮1</button>
                  <button type="button" class="btn btn-primary">按钮2</button>
                  <button type="button" class="btn btn-primary">按钮3</button>
            </div>

            <!-- 大型按钮 -->
            <div class="btn-group btn-group-lg">
                  <button type="button" class="btn btn-primary">按钮1</button>
                  <button type="button" class="btn btn-primary">按钮2</button>
                  <button type="button" class="btn btn-primary">按钮3</button>
            </div>

            <!-- 小型按钮 -->
            <div class="btn-group btn-group-sm">
                  <button type="button" class="btn btn-primary">按钮1</button>
                  <button type="button" class="btn btn-primary">按钮2</button>
                  <button type="button" class="btn btn-primary">按钮3</button>
            </div>

            <!-- 垂直按钮 -->
            <div class="btn-group-vertical">
                  <button type="button" class="btn btn-primary">按钮1</button>
                  <button type="button" class="btn btn-primary">按钮2</button>
                  <button type="button" class="btn btn-primary">按钮3</button>
            </div>

            <!-- 水平下拉按钮 -->
            <div class="btn-group">
                  <button type="button" class="btn btn-primary">按钮5</button>
                  <button type="button" class="btn btn-primary">按钮6</button>
                  <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">按钮7</button>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">下拉1</a>
                              <a class="dropdown-item" href="#">下拉2</a>
                        </div>
                  </div>
            </div>

            <!-- 带拆分的水平下拉按钮 -->
            <div class="btn-group">
                  <button type="button" class="btn btn-primary">按钮5</button>
                  <button type="button" class="btn btn-primary">按钮6</button>
                  <div class="btn-group">
                        <button type="button" class="btn btn-primary">按钮7</button>
                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                              <span class="caret"></span>
                        </button>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">下拉1</a>
                              <a class="dropdown-item" href="#">下拉2</a>
                        </div>
                  </div>
            </div>

            <!-- 垂直下拉按钮 -->
            <div class="btn-group-vertical">
                  <button type="button" class="btn btn-primary">按钮5</button>
                  <button type="button" class="btn btn-primary">按钮6</button>
                  <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">按钮7</button>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">下拉1</a>
                              <a class="dropdown-item" href="#">下拉2</a>
                        </div>
                  </div>
            </div>
      </body>
</html>